<template>
    <div class="comp-select-box-v" :style="{height:compType === ecompSearchType.typeSelect?height+'px':''}" :class="bigFontSize?'big-font-size-v':''">
        <span v-show="false">{{ width }}</span><!--不可删除-->
        <!-- ,height:height+'px' -->
        <a-select
        :ref="refSubelement?refSubelement:''"
        :id="refSubelement?'compSelector'+refSubelement:''"
        :name="compName" 
         v-model:value="modelValue"
         :allowClear="allowClear"
         v-if="compType === ecompSearchType.typeSelect"
         @change="selectChange"
         :options="optionsArr"
         :style="{width:widthPercentile?widthPercentile:width+'px'}"
         :placeholder="'请选择'+placeholder"
         :disabled='disabled'
        />
        <a-radio-group
        :ref="refSubelement?refSubelement:''"
        :id="refSubelement?'compSelector'+refSubelement:''"
        :style="{minWidth:width+'px'}"
         :defaultValue="defaultValue" 
         v-if="compType === ecompSearchType.typeRadio"
         :name="compName" 
         :options="optionsArr" 
         v-model:value="modelValue" 
         @change="radioChange" 
         :disabled='disabled' 
        />
        <a-checkbox-group
        :ref="refSubelement?refSubelement:''"
        :id="refSubelement?'compSelector'+refSubelement:''"
         :defaultValue="defaultValue"
         :style="{minWidth:width+'px'}"
         v-if="compType === ecompSearchType.typeCheckbox"
         v-model:value="modelValue"
         :name="compName" 
         :options="optionsArr"
         @change="checkBoxChange"
         :disabled='disabled' 
        />
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '../compSearchCriteria/ContractType'
import { ocalityPostAction, getDictListByDictCodeServe } from  '../../../src/views/assessCheck/observerLibrary/service/index'
export default {
    name: 'compSelector',
    components:{},
    model: {//在父组件可以用自定义组件的v-model获取值
        prop: "value",
        event: "selectHandleChange"
    },
    props: {
        value:{
            type: [String, Number, Array, Object],
            default: undefined,
            required: false,
        },
        bigFontSize:{
            type:Boolean,
            default:()=>{
                return false
            },
            required: false,//非必传
        },
        currentValue:{//当前值
            type:[String,Number,Array],
            default:undefined,
            required: false,//非必传
        },
        defaultValue:{//默认值
            type:[String,Number,Array],
            default:undefined,
            required: false,
        },
        allowClear:{//下拉框是否显示清除按钮
            type:Boolean,
            default:()=>{
                return false
            },
            required: false,
        },
        options:{//数据配置[{label:'',value:''}]
            type:[Array,String,Object],
            default:function() {
			    return []
		    },
            required: false,
        },
        disabled:{//是否禁用
            type:Boolean,
            default:()=>{
                return false
            },
            required: false,
        },
        width:{//下拉框的宽度
            type:[Number,String],
            default:()=>{
                return 175
            },
            required: false,
        },
        height:{//下拉框的宽度
            type:[Number,String],
            default:()=>{
                return 40
            },
            required: false,
        },
        widthPercentile:{//下拉框的宽度
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        compType:{//类型
            type:String,
            default:'select'
        },
        placeholder:{
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        dictionaryType:{//字典类型--名称
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        dictType:{//字典类型--类型
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        separateAreas:{//区分业务编码请求
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        deselect:{//是否取消选择
            type:Boolean,
            default:()=>{
                return false
            },
            required: false,
        },
        refSubelement:{
            type:String,
            default:()=>{
                return ''
            },
            required: false,
        },
        isDisable:{
            type:Boolean,
            default:()=>{
                return false
            },
            required: false,
        },
        index:{
            type:Number,
            default:()=>{
                return undefined
            },
            required: false,
        },
        dataItem:{
            type:Object,
            default:()=>{
                return {}
            },
            required: false,
        },
        
    },
    watch: {
        'defaultValue':{
            deep:true,
            handler(newval,oldVal){
                this.$nextTick(() => {
                    this.modelValue = newval?newval:undefined
                })
            }
        },
        'dictionaryType':{
            deep:true,
            handler(newval,oldVal){
                if(Array.isArray(this.options) && this.options.length){
                    this.optionsArr = this.options
                    this.vxeRadioKey = Date.now()
                }else if(this.options.data){
                    this.optionsDataChange(this.options.data,this.options.dataType)
                    this.vxeRadioKey = Date.now()
                }
                if(newval && !this.separateAreas){
                    //console.log('this.dictionaryType=========',this.dictionaryType)
                    ocalityPostAction({dictName:newval}).then(res=>{
                        //console.log('字典的res',res)
                        if(res.code == 200){
                            if(res.result.length){
                                this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                                this.vxeRadioKey = Date.now()
                            }
                            
                        }
                    })
                    
                }
                if(this.separateAreas && newval){
                    getDictListByDictCodeServe({dictCode:this.separateAreas}).then(res=>{
                        //console.log('字典的res',res)
                        if(res.code == 200){
                            if(res.result.length){
                                this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                                this.vxeRadioKey = Date.now()
                            }
                            
                        }
                    })
                }
            }
        },
        'width':{
            deep:true,
            handler(newval,oldVal){
                //console.log('当前宽度',newval)
            }
        }
    },
    data(){
        return{
            aSelectKey:null,
            modelValue:this.defaultValue?this.defaultValue:undefined,
            compName:this.compType + new Date().getTime(),
            ecompSearchType:{
                typeInput:typeInput,
                typeNumber:typeNumber,
                typeSelect:typeSelect,
                typeCheckbox:typeCheckbox,
                typeRadio:typeRadio,
            },
            optionsArr:[],
            previousValue:'',
            vxeRadioKey:null,
        }
    },
    
    mounted(){//子组件会先比父组件执行
        //console.log(this.options)
        this.$nextTick(()=>{
            
        
            if(Array.isArray(this.options) && this.options.length){
                this.optionsArr = this.options
                this.vxeRadioKey = Date.now()
            }else if(this.options.data){
                this.optionsDataChange(this.options.data,this.options.dataType)
                this.vxeRadioKey = Date.now()
            }
            if(this.dictionaryType && !this.separateAreas){
                //console.log('this.dictionaryType=========',this.dictionaryType)
                ocalityPostAction({dictName:this.dictionaryType}).then(res=>{
                    //console.log('字典的res',res)
                    if(res.code == 200){
                        if(res.result.length){
                            this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                            this.vxeRadioKey = Date.now()
                        }
                        
                    }
                })
                
            }
            if(this.separateAreas && this.dictionaryType){
                getDictListByDictCodeServe({dictCode:this.separateAreas}).then(res=>{
                    //console.log('字典的res',res)
                    if(res.code == 200){
                        if(res.result.length){
                            this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                            this.vxeRadioKey = Date.now()
                        }
                        
                    }
                })
            }
            //console.log('没有下拉值吗',this.optionsArr)
            
        })
    },
    updated(){
        //console.log('我在子组件拿到的',this.isDisable)
        
        this.$nextTick(()=>{
            let that = this
            setTimeout(() => {
                
                if(!that.isDisable && that.dataItem.label && document.getElementById('compSelector'+that.refSubelement) && document.getElementById('compSelector'+that.refSubelement).offsetWidth){
                    //console.log('我在子组件拿到的setTimeout',document.getElementById('compSelector'+that.refSubelement).offsetWidth)
                    let item = {
                        ...that.dataItem,
                        offsetWidth:document.getElementById('compSelector'+that.refSubelement).offsetWidth,
                        isDisable:true,
                    }
                    let itemData = that.dataItem
                    if(item.offsetWidth && itemData.windowInnerWidth){
                        if(item.offsetWidth > (itemData.windowInnerWidth)*3+((itemData.formItemLabelMaxSize)*3)){
                            item.width = this.windowInnerWidth - itemData.formItemLabelMaxSize
                        }else if(item.offsetWidth > (itemData.windowInnerWidth)*2+itemData.formItemLabelMaxSize){
                            item.width = (itemData.windowInnerWidth)*3+((itemData.formItemLabelMaxSize)*2)
                        }else if(item.offsetWidth > (itemData.windowInnerWidth)+itemData.formItemLabelMaxSize){
                            item.width = (itemData.windowInnerWidth)*2+((itemData.formItemLabelMaxSize))
                        }
                    }
                    that.width = item.width
                    that.$emit('nextTickYeas',{id:that.refSubelement,index:that.index,item:item})
                }
            },200)
        })
        
    },
    methods:{
        getRefWidth(val){
            //console.log('我从新进来了',val)
            this.width = val
        },
        optionsDataChange(dataList,dataType){
            var newOptionArr = []
            this.optionsArr = []
            //标识每一项的下标，并且添加到每一项
            dataList.forEach((item,index) => {
                if(!newOptionArr.filter(l=>l.itemIndex === index).length){
                    newOptionArr.push({...item,itemIndex:index})
                }
            });
            for (let i = 0; i <= newOptionArr.length; i++) {//打印的item为数组中的每一个对象
                let item = newOptionArr[i]
                let index = i
                for (let key in item) { //遍历数组中的对象
                    var currentItem = {}
                    if(index === item.itemIndex){
                        currentItem = {
                            label:item[dataType.label],
                            value:item[dataType.value]
                        }
                        if(!this.optionsArr.filter(l=>l.label === currentItem.label).length && currentItem.label){
                            this.optionsArr.push(currentItem)
                        }
                    }
                    

                }
            }
        },
        selectChange(val,option){
            this.$emit('selectHandleChange',val)
        },
        radioChange(val){
            var name = this.optionsArr.length && this.optionsArr.filter(i=>i.value === val.target.value)[0].label?this.optionsArr.filter(i=>i.value === val.target.value)[0].label:''
            if(this.deselect){
                if(!this.previousValue){
                    this.previousValue = val.target.value
                    this.$emit('selectHandleChange',val.target.value)
                }else if(this.previousValue && this.previousValue === val.target.value){
                    this.modelValue = ''
                    this.$emit('selectHandleChange','')
                }
            }else{
                this.$emit('selectHandleChange',val.target.value)
            }
        },
        vxeRadioChange(val){
            //console.log('摁下',val)
        },
        // radioKeydown(val){
        //     //console.log('摁下',val)
        // },
        checkBoxChange(val){
            var labelArr = []
            for(var i = 0; i<this.optionsArr.length;i++){
                var optionItem = this.optionsArr[i]
                for(var a = val.length; a>=0;a--){
                    var arr = labelArr.filter(l=> l === optionItem.label)
                    val.indexOf(optionItem.value) !== -1 && !arr.length? labelArr.push(optionItem.label):''
                }
            }
            this.$emit('selectHandleChange',val)
        },

    }
}


</script>
<style lang="less">
.comp-select-box-v{
    // height: 40px;
    display: flex;
    align-items: center;
}
.big-font-size-v{
    .a-select-option{
        font-size:18px
    }
    .ant-select-dropdown-menu-item{
        font-size:18px !important;
    }
    .ant-radio-wrapper{
        font-size:18px !important;
    }
}

</style>